<template>
    <div class="home-wrapper">
        <div class="home-top">
            <div style="width:100%;flex: 1;color: white;display: flex;align-items: center" >
                <div style="margin-bottom: 0">
                    <i class="el-icon-location-information"></i>
                    大连大学
                </div>
            </div>
            <div style="display: flex;justify-content: center;flex: 1">
                <div class="input-search">
                    <el-input class="input-el" type="text" :placeholder="icon" v-model="input1" prefix-icon="el-icon-search"></el-input>
                </div>
            </div>
        </div>
        <div class="home-bottom">
            <div class="bottom-top">
                <div style="display: flex;flex: 1;justify-content: center;align-items: center;flex-flow: column">
                    <img src="../../assets/01.webp" alt="" style="width: 40px">
                    <p style="font-size: 14px">美食</p>
                </div>
                <div style="display: flex;flex: 1;justify-content: center;align-items: center;flex-flow: column">
                    <img src="../../assets/02.webp" alt="" style="width: 40px">
                    <p style="font-size: 14px">美食</p>
                </div>
                <div style="display: flex;flex: 1;justify-content: center;align-items: center;flex-flow: column">
                    <img src="../../assets/01.webp" alt="" style="width: 40px">
                    <p style="font-size: 14px">美食</p>
                </div>
                <div style="display: flex;flex: 1;justify-content: center;align-items: center;flex-flow: column">
                    <img src="../../assets/02.webp" alt="" style="width: 40px">
                    <p style="font-size: 14px">美食</p>
                </div>
                <div style="display: flex;flex: 1;justify-content: center;align-items: center;flex-flow: column">
                    <img src="../../assets/01.webp" alt="" style="width: 40px">
                    <p style="font-size: 14px">美食</p>
                </div>
            </div>
            <div class="bottom-top">
                <div style="display: flex;flex: 1;justify-content: center;align-items: center;flex-flow: column">
                    <img src="../../assets/02.webp" alt="" style="width: 40px">
                    <p style="font-size: 14px">美食</p>
                </div>
                <div style="display: flex;flex: 1;justify-content: center;align-items: center;flex-flow: column">
                    <img src="../../assets/01.webp" alt="" style="width: 40px">
                    <p style="font-size: 14px">美食</p>
                </div>
                <div style="display: flex;flex: 1;justify-content: center;align-items: center;flex-flow: column">
                    <img src="../../assets/02.webp" alt="" style="width: 40px">
                    <p style="font-size: 14px">美食</p>
                </div>
                <div style="display: flex;flex: 1;justify-content: center;align-items: center;flex-flow: column">
                    <img src="../../assets/01.webp" alt="" style="width: 40px">
                    <p style="font-size: 14px">美食</p>
                </div>
                <div style="display: flex;flex: 1;justify-content: center;align-items: center;flex-flow: column">
                    <img src="../../assets/02.webp" alt="" style="width: 40px">
                    <p style="font-size: 14px">美食</p>
                </div>
            </div>
            <div class="inter">
                <div class="text-intro">
                    <div style="width: 70%">
                        <p style="font-size: 23px">品质套餐</p>
                        <p style="font-size: 17px;margin-top: 3px">搭配齐全吃得好</p>
                        <p style="font-size: 14px;margin-top: 15px;color: goldenrod">立即抢购<i class="el-icon-arrow-right"></i></p>
                    </div>
                </div>
                <div class="img-intro">
                    <img src="../../assets/03.webp" alt="美食" style="width: 90px;height: 90px">
                </div>
            </div>
            <div class="member">
                <div style="width: 70%;display: flex;align-items: center">
                    <i class="el-icon-present" style="color: darkgoldenrod;font-size: 25px;margin-left: 20px"></i>
                    <div style="font-size: 18px;margin-left: 10px">超级会员</div>
                    <div style="font-size: 12px;margin-left: 10px">每月享超值权益</div>
                </div>
                <div style="width: 30%;display: flex;align-items: center;justify-content: flex-end;margin-right: 10px">
                    <p style="font-size: 14px;">立即开通</p>
                    <i class="el-icon-arrow-right" style="font-size: 13px"></i>
                </div>
            </div>
            <div class="tuijian">
                <div style="border: 0.5px solid gray;width:20px;height:0"></div>
                <div style="margin-right: 10px;margin-left: 10px">推荐商家</div>
                <div style="border: 0.5px solid gray;width:20px;height:0"></div>
            </div>
            <div class="four-option">
                <div style="flex: 1;display: flex;justify-content: center;align-items: center">
                    <p>综合排序</p>
                    <i class="el-icon-caret-bottom" style="color: gray;font-size: 15px;"></i>
                </div>
                <div style="flex: 1;display: flex;justify-content: center;align-items: center">
                    <p>距离最近</p>
                </div>
                <div style="flex: 1;display: flex;justify-content: center;align-items: center">
                    <p>销量最高</p>
                </div>
                <div style="flex: 1;display: flex;justify-content: center;align-items: center">
                    <p>筛选</p>
                    <i class="el-icon-paperclip" style="color: gray;font-size: 15px;"></i>
                </div>
            </div>
            <div class="goods">
                <div @click="toBusiness">
                    <goods></goods>
                </div>
                <goods></goods>
                <goods></goods>
                <goods></goods>
                <goods></goods>
                <goods></goods>
            </div>
        </div>
    </div>
</template>

<script>
    import goods from "../../components/goods";
    export default {
        name: "homePage",
        data(){
            return{
                input1:'',
                icon:'搜索饿了么商家、商品名称'
            }
        },
        components:{
            goods
        },
        methods:{
            toBusiness(){
                this.$router.push('/business');
                this.$store.state.indexCurrent = 1
            }
        }
    }
</script>

<style scoped>
    .home-wrapper{
        width: 100%;
        height: auto;
    }
    .home-top{
        width: 375px;
        height: 120px;
        background-color: blue;
        display: flex;
        flex-flow: column;
        position: fixed;
        /*background-image: linear-gradient(#6565e6, #3d3def);*/
    }
    .home-bottom{
        width: 100%;
        height: auto;
        padding-top: 120px;
    }
    .input-search{
        width: 92%;
    }
    .bottom-top{
        width: 100%;
        display: flex;
    }
    .inter{
        height: 100px;
        width: 100%;
        display: flex;
        flex-flow: row;
        margin-top: 30px;
    }
    .text-intro{
        flex: 1;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
    }
    .img-intro{
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .member{
        margin-top: 20px;
        background-color: gold;
        display: flex;
        height: 50px;
    }
    .tuijian{
        height: 50px;
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .four-option{
        font-size: 15px;
        height: 40px;
        display: flex;
        color: gray;
    }
    .goods{
        margin-top: 20px;
    }
</style>
